<template>
  <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" :height="450" :left="20" :top="150">
    <div class="box">
      <!-- 功能按钮 -->
      <div class="cimrts-panel">
        <MainMenuList :menuList="sceneConfigMenuList" @clickComponent="addComponent" :isDisabled="false" />
      </div>
      <div class="center">
        <div class="item" v-for="item in sceneTreeListsRef" :key="item.id"
          @contextmenu.prevent.stop="iconContexMenuEvent(item)" @dblclick="flyTo(item.id)">
          <el-checkbox size="large" @change="isShow(item, $event)" :checked="item._sceneObject.show" />
          <div class="icon" :class="{
            imagery: item.type == 'imagery',
            terrain: item.type == 'terrain',
            tileset: item.type == 'tileset',
          }"></div>
          <span class="name">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <ContextMenuCom :baseItems="menuContent"></ContextMenuCom>
  </Dialog>

  <TooltipCom v-if="currentDialogRef == 'delete'" :content="'确定删除吗？'" :title="'删除'" :isVisible="true"
    @close="currentDialogRef = undefined" @confirm="deleteConfirm" />
  <addSceneObject v-if="currentDialogRef == 'add'" :title="sceneObjectTypeTitle" :isVisible="true"
    @close="currentDialogRef = undefined" @confirm="addConfirm" :type="sceneObjectType" />
</template>


<script setup lang="ts">
import {
  createVueDisposer,
  toVR,
} from "earthsdk-ui";
import Dialog from "../components/Dialog.vue";
import addSceneObject from "../components/addSceneObject.vue";

import ContextMenuCom from "../components/common/ContextMenuCom.vue";

import { onBeforeUnmount, ref, computed } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";

import TooltipCom from "../components/common/TooltipCom.vue";
import MainMenuList from "@/components/common/MainMenuList.vue";
import { sceneConfigMenuList } from "@/scripts/menu/baseSceneConfig/sceneConfigMenuList";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager()

const baseSceneConfig = getProjectManager().baseSceneConfig as any;


// 场景树列表
const sceneTreeListsRef = toVR<any>(d, [baseSceneConfig, "sceneTreeLists"]);

// 弹出框显隐
const currentDialogRef = toVR<any>(d, [baseSceneConfig, "currentDialog"]);

// 场景对象显隐
const isShow = (item: any, e: any) => {
  const sceneObject = sceneTreeListsRef.value.find(
    (e: any) => e.id == item.id
  )._sceneObject;
  sceneObject.show = e;
  item.show = e;
  sceneTreeListsRef.value = [...sceneTreeListsRef.value];
};

// 右键菜单列表
const menuContent = ref<Array<MenuContentType>>([]);

// 右键菜单
const iconContexMenuEvent = (item: any) => {
  if (!item.contextmenus || !item.contextmenus.length) return;
  const baseItems: Array<MenuContentType> = item.contextmenus.map(
    (item: any) => {
      // {
      //     type: "divider",
      // },
      return {
        text: item.text,
        keys: "",
        func: () => {
          item.func();
        },
      };
    }
  );

  menuContent.value = baseItems;
};

const sceneObjectTypeTitle = computed(() => {
  return sceneObjectType.value == "imagery" ? "添加影像" : (sceneObjectType.value == "tileset" ? "添加瓦片" : "添加地形");
})

// 删除弹出框 确定按钮
const deleteConfirm = () => {
  baseSceneConfig.dialogEvent.emit("confirm");
  currentDialogRef.value = undefined;
};

const sceneObjectType = ref("");

// 添加组件
const addComponent = async (item: any) => {
  sceneObjectType.value = item.id;
  currentDialogRef.value = "add";
};


// 添加弹出框 确定按钮
const addConfirm = (val: any) => {
  console.log(val, "val");
  baseSceneConfig.addSceneObject(val);
  currentDialogRef.value = undefined;
};

const flyTo = (id: string) => {
  const sceneObject = sceneTreeListsRef.value.find(
    (e: any) => e.id == id
  )._sceneObject;
  sceneObject.flyTo();
};

</script>


<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  user-select: none;
  display: flex;
  flex-direction: column;
}

.top {
  box-sizing: border-box;
  height: 34px;
  width: 100%;
  /* background-color: pink; */
  display: flex;
  justify-content: space-around;
}

.common-btn {
  width: 30%;
}

.add {
  width: 33%;
  height: 100%;
  border: 2px solid #373737;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  border-radius: 5px;
}

.center {
  height: calc(100% - 80px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 75%;
}

.bottom {
  /* height: 30px; */
  padding: 0 20px;
  display: flex;
  flex-direction: column;

}

.item:first-child {
  margin-top: 10px;
}

.item {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 30px;
  /* padding-top:10px;  */
  cursor: pointer;
}

.icon {
  width: 20px;
  height: 20px;
}

.imagery {
  background: url("../assets/baseSceneConfig/imagery.png") no-repeat;
  background-size: 100% 100%;
}

.terrain {
  background: url("../assets/baseSceneConfig/terrain.png") no-repeat;
  background-size: 100% 100%;
}

.tileset {
  background: url("../assets/baseSceneConfig/tileset.png") no-repeat;
  background-size: 100% 100%;
}

.item2 {
  height: 30px;
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.el-button {
  margin-left: 0 !important;
}
</style>
